<template>
    <div>
        <div class="comment-list-item" v-for="(item,index) in commentList" :key="index">
            <div class="comment-user">
                <el-avatar :size="60" :src="item.userImg"></el-avatar>
                <div class="comment-user-info">
                    <a href="javascript:;" class="comment-user-nickname" @click="$router.push({name:'PersonalSpace',query:{userId:item.userId}})">{{item.userNickName}}</a>
                    <p class="comment-date">{{item.date}}</p>
                </div>
            </div>
            <div class="comment-content">
                <pre>{{item.commentText}}</pre>
            </div>
            <el-divider></el-divider>
        </div>
    </div>
</template>

<script>
export default {
    name:"articleCommentList",
    props:{
        commentList:{
            type: Array,
            default:()=>[]
        }
    }
}
</script>

<style>
.comment-user {
    display: flex;
    justify-content: left;
    align-items: center;
}
.comment-user-info {
    padding: 10px;
}
.comment-user-nickname,.comment-content {
    color: #666;
    transition: all 0.3s;
}
.comment-user-nickname:hover {
    color: #00c3ff;
}
.comment-date {
    color: #ccc;
}
.comment-content {
    padding-top: 20px;
}
</style>